<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/complaint.css" />
		<style type="text/css">
			.mui-toast-container {
				text-align: center;
				position: fixed;
				z-index: 9999;
				bottom: 50px;
				width: 100%;
				-webkit-transition: opacity .8s;
				transition: opacity .8s;
				opacity: 1
			}
			
			.mui-toast-container {
				display: none
			}
		</style>
	</head>

	<body style="background: #eaeef1;">
		<div class="header" style="border-bottom: 1px solid #efefef;">
			<h1 style="font-size: 17px;font-weight: 500;">投诉建议</h1>
			<li class="register-back mui-action-back"><img src="img/back-le.png" alt="" height="50%" onclick="history.back(-1)" /></li>
		</div>
		<div id="top" class="top">
			<span>投诉建议</span>
			<span>我的投诉建议</span>
		</div>
		<div class="abc">
			<div id="ts" class="main1">
				<p class="main2">
					<span>投诉建议分类：</span>
					<span><input id="tog1" readonly="readonly" type="text" placeholder="请选择建议分类" name="" id="" value="" /></span>
					<span id="tog"><img src="img/back-bo.png"/></span>
				</p>
				<p>
					<span>涉及订单号：</span>
					<span><input class="tousuorder" type="text" placeholder="请输入投诉单号" name="" id="" value="" /></span>
				</p>
				<p>
					<span>投诉建议内容：</span>
					<span></span>
				</p>
				<textarea class="tousucon" name="" placeholder="你的建议是我们最大的动力~" rows="" cols=""></textarea>
			</div>
			<div id="mine_ts">
				<!--<div class="main1">
					<p class="main3"><span>对象：</span><span>其他</span></p>
					<p><span>涉及订单号：</span><span>123456</span></p>
					<p class="main2"><span>投诉内容</span><span class="de">查看内容详情</span><span class="de"><img src="img/turn-right.png"/></span></p>
				</div>-->
			</div>
		</div>
		<div class="tog">
			<p id='1'>订单问题</p>
			<p id='2'>物流问题</p>
			<p id='3'>客户问题</p>
			<p id='4'>商品质量</p>
			<p id='5'>价格问题</p>
			<p id='6'>网站功能</p>
			<p id='7'>建议</p>
			<p id='8'>其他</p>
		</div>
		<div class="foot">
			提交
		</div>
		<div class="mui-toast-container" id="mui-toast-container">
			<div class="mui-toast-message"></div>
		</div>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//		mui.plusReady(function() {
			//				//				plus.nativeUI.showWaiting();
			//			})

			$(".tog").hide();
			var count = 0;
			$("#tog").click(function() {
				$("#tog").css('background-color', '#CCCCCC')
				$(".tog").toggle();
				count = count + 1;
				if(count % 2 == 0) {
					$("#tog").css('background-color', '#FFFFFF');
				}

				//				$("#tog").click(function() {
				//					$("#tog").css('background-color', '#FFFFFF');
				//				})
			});
			$(".tog").on('tap', 'p', function() {
				count = count + 1;
				$(".tog").hide();
				localStorage.tousutype = $(this).attr('id');
				$("#tog").css('background-color', '#FFFFFF');
				console.log($(this).text())
				$("#tog1").val($(this).text())
			});
			//			切换
			$('#top').on('tap', 'span', function() {
				console.log($(this).index())
				$(this).css('border-bottom', '2px solid #e9af29');
				$(this).css('color', '#e9af29')
				$(this).siblings().css('border-bottom', 'none')
				$(this).siblings().css('color', '#000000')
				$('.abc>div').eq($(this).index()).css('display', 'block');
				$('.abc>div').eq($(this).index()).siblings().css('display', 'none');
				if($(this).index() == 1) {
					$('.foot').css('display', 'none');
					$('#mine_ts').html('');
					tousu();
				} else {
					$('.foot').css('display', 'block')
				}
			})
			//			窗口
			//			$('.de').on('tap',function(){
			//				mui.openWindow({
			//					url:'complaint_de.html',
			//					id:'complaint_de.html',
			//					show:'pop-in'
			//				})
			//			})

			/*查看我的投诉建议*/
			function tousu() {
				$.ajax({
					type: "post",
					url: ur + '/mobilemember/frontmember/getSuggestion',
					async: true,
					headers: {
						'X-Token': localStorage.token
					},
					success: function(data) {
						console.log(data);
						if(data.result.meta.code == 200) {
							console.log(data.result.data.length);
							for(var i = 0; i < data.result.data.length; i++) {
								var divd = ('<div class="main1" id="' + data.result.data[i].sugId + '" lid="' + i + '">' +
									'<p class="main3"><span>对象：</span><span class="type' + i + '">其他</span></p>' +
									'<p><span>涉及订单号：</span><span>' + data.result.data[i].sugOrderNum + '</span></p>' +
									'<p class="main2"><span>投诉内容：</span><span class="de">查看内容详情</span><span class="de"><img src="img/turn-right.png"/></span></p>' +
									'</div>');
								$('#mine_ts').append(divd);
								if(data.result.data[i].sugSort == 1) {
									$('.type' + i + '').text('订单问题');
								} else if(data.result.data[i].sugSort == 2) {
									$('.type' + i + '').text('物流问题');
								} else if(data.result.data[i].sugSort == 3) {
									$('.type' + i + '').text('客户问题');
								} else if(data.result.data[i].sugSort == 4) {
									$('.type' + i + '').text('商品质量');
								} else if(data.result.data[i].sugSort == 5) {
									$('.type' + i + '').text('价格问题');
								} else if(data.result.data[i].sugSort == 6) {
									$('.type' + i + '').text('网站功能');
								} else if(data.result.data[i].sugSort == 7) {
									$('.type' + i + '').text('建议');
								} else if(data.result.data[i].sugSort == 8) {
									$('.type' + i + '').text('其他');
								}
							}
							//							plus.nativeUI.closeWaiting();
						}
					},
					error: function() {
						//						plus.nativeUI.closeWaiting();
					}
				});
			}
			/*点击进入内容详情*/
			$('#mine_ts').on('tap', '.de', function() {
				//				alert($(this).parents('.main1').attr('lid'));
				localStorage.wherecont = $(this).parents('.main1').attr('lid')
				mui.openWindow({
					url: 'complaint_de.html',
					id: 'complaint_de.html',
					show: 'pop-in'
				})
			});

			/*点击提交投诉建议*/
			$('.foot').on('tap', function() {
				var order=/^[0-9]*$/;
				//				plus.nativeUI.showWaiting();
				if($('#tog1').val() == '') {
					$('#mui-toast-container').css('display', 'inline-block')
					$('.mui-toast-message').html('请选择建议类型');
					setTimeout(function() {
						$('#mui-toast-container').css('display', 'none')
					}, 1000)
				} else if($('.tousuorder').val() == ''||(!order.test($('.tousuorder').val()))) {
					$('#mui-toast-container').css('display', 'inline-block')
					$('.mui-toast-message').html('请检查您的投诉单号');
					setTimeout(function() {
						$('#mui-toast-container').css('display', 'none')
					}, 1000)
				} else if($('.tousucon').val() == '') {
					$('#mui-toast-container').css('display', 'inline-block')
					$('.mui-toast-message').html('投诉内容不能为空');
					setTimeout(function() {
						$('#mui-toast-container').css('display', 'none')
					}, 1000)
				} else {
					submitjianyi();
				}
			});

			function submitjianyi() {
				$.ajax({
					type: "post",
					url: ur + '/mobilemember/frontmember/saveSuggestionByAdd',
					async: true,
					headers: {
						'X-Token': localStorage.token
					},
					data: {
						'csuggestionVO.sugContent': $('.tousucon').val(),
						'csuggestionVO.sugOrderNum': $('.tousuorder').val(),
						'csuggestionVO.sugSort': localStorage.tousutype
					},
					success: function(data) {
						console.log(data);
						//						plus.nativeUI.closeWaiting();
						if(data.result.meta.code == 200) {
							$('#mui-toast-container').css('display', 'inline-block')
							$('.mui-toast-message').html('投诉建议已发送，请到我的投诉建议查看');
							setTimeout(function() {
								$('#mui-toast-container').css('display', 'none')
							}, 1000)
							$('#tog1').val('');
							$('.tousuorder').val('');
							$('.tousucon').val('');
						}
					},
					error: function() {
						//						plus.nativeUI.closeWaiting();
					}
				});
			}
		</script>
	</body>

</html>